<template>
  <div class="divBox">
    <el-card class="box-card" shadow="never">
      <div slot="header" class="clearfix">
      </div>
      <el-table
        v-loading="listLoading"
        :data="tableData.data"
        style="width: 100%"
        size="mini"
      >
        <el-table-column
          label="直播间ID"
          prop="roomid"
          min-width="100"
          align="center"
        />
        <el-table-column
          label="直播间名称"
          prop="name"
          min-width="100"
          align="center"
        >
        </el-table-column>
        <el-table-column
          label="主播昵称"
          prop="anchor_name"
          min-width="100"
          align="center"
        >
        </el-table-column>
        <!-- <el-table-column
          label="主播微信号"
          prop="anchorWechat"
          min-width="100"
          align="center"
        >
        </el-table-column> -->
        <el-table-column
          label="直播开始时间"
          prop="start_time"
          min-width="100"
          align="center"
        />
        <el-table-column
          label="直播结束时间"
          prop="end_time"
          min-width="100"
          align="center"
        />
        <!-- <el-table-column
          label="创建时间"
          prop="endTime"
          min-width="100"
          align="center"
        /> -->
        <!-- <el-table-column label="显示状态" align="center">
        <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              :active-value="1"
              :inactive-value="0"
              active-text="开启"
              inactive-text="关闭"
              @change="onchangeIsShow(scope.row)"
              align='left'
            />
          </template>
        </el-table-column> -->
        <el-table-column
          label="直播状态"
          prop="live_status"
          min-width="100"
          align="center"
        >
        <template slot-scope="scope">
          <span v-if="scope.row.live_status==101">直播中</span>
          <span v-if="scope.row.live_status==102">未开始</span>
          <span v-if="scope.row.live_status==103">已结束</span>
          <span v-if="scope.row.live_status==104">禁播</span>
          <span v-if="scope.row.live_status==105">暂停</span>
          <span v-if="scope.row.live_status==106">异常</span>
          <span v-if="scope.row.live_status==107">已过期</span>
        </template>
        </el-table-column>
        <!-- <el-table-column
          label="排序"
          prop="endTime"
          min-width="100"
          align="center"
        /> -->
        <el-table-column label="操作" fixed="right" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleDelete(scope.row.roomid, scope.$index)" >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block mb20">
        <el-pagination
          :page-sizes="[10, 20, 30, 40]"
          :page-size="tableFrom.limit"
          :current-page="tableFrom.page"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.total"
          @size-change="handleSizeChange"
          @current-change="pageChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
  import { getzhilist,deletezhibo,exportBargainApi,toupiaoList,toupiaodeta,toupiaozhuang } from '@/api/marketing'
  export default {
    name: "index",
    data() {
      return {
        tableFrom: {
          page: 1,
          limit: 20,
          keywords: '',
          status: null
        },
        listLoading: true,
        tableData: {
          data: [],
          total: 0
        },
      }
    },
    created(){
        this.getList()
    },
    methods: {
      //显示状态修改
      onchangeIsShow(val){
        console.log(val)
      },
         formatDate(now) { 
     var year=now.getFullYear(); 
     var month=now.getMonth()+1; 
     var date=now.getDate(); 
     var hour=now.getHours(); 
     var minute=now.getMinutes(); 
     var second=now.getSeconds(); 
     console.log(hour,minute,second)
     if(month<10){
        var month='0'+ month
     }
     if(date<10){
        var date='0'+ date
     }
     if(hour<10){
        var hour='0'+ hour
     }
     if(minute<10){
        var minute='0'+ minute
     }
     if(second<10){
        var second='0'+ second
     }
     return year+"-"+month+"-"+date+" "+hour+":"+minute+":"+second; 
},
        // tiaozhuan(){
        //     this.$router.push('/creattou')
        // },
      //导出
    //   exportList(){
    //     exportBargainApi({keywords: this.tableFrom.keywords, status:this.tableFrom.status}).then((res) => {
    //       window.open(res.fileName)
    //     })
    //   },
      // 删除
      handleDelete(id, idx) {
        console.log(id,idx)
        this.$confirm('此操作将永久删除该直播间, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            this.listLoading = true
          deletezhibo(id).then((res) => {
            console.log(res)
              this.$message.success('删除成功');
            this.getList()
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      // 列表
      getList(num) {
        this.listLoading = true
        this.tableFrom.page = num ? num : this.tableFrom.page;
        console.log("this.tableFrom",this.tableFrom)
        let parmas={
          size:this.tableFrom.limit,
          current:this.tableFrom.page
        }
        getzhilist(parmas).then(res => { 
            console.log(res)
          this.tableData.data = res.room_info
          for(let i=0;i<this.tableData.data.length;i++){
              this.tableData.data[i].start_time=this.formatDate(new Date(this.tableData.data[i].start_time*1000))
              this.tableData.data[i].end_time=this.formatDate(new Date(this.tableData.data[i].end_time*1000))
          }
        //   this.tableData.data.map(item=>{
        //     if(item.status==0){
        //       item.status=false
        //     }else{
        //       item.status=true
        //     }
        //   })
          this.tableData.total = res.total
          this.listLoading = false
        }).catch((res) => {
          this.listLoading = false
        })
      },
      pageChange(page) {
        console.log(page)
        this.tableFrom.page = page
        this.getList()
      },
      handleSizeChange(val) {
        this.tableFrom.limit = val
        this.getList()
      }
    }
  }
</script>

<style scoped>

</style>
